<template>
  <div class="rob_tab">
    <div class="rob_top flexM">
      <!-- <div class="top_l flexM">
        <div style="margin-right: 12px">抢客池开关</div>
        <i-switch v-model="switchVal" @on-change="robButton" v-if="unlocking('0102010901')"></i-switch>
      </div> -->
      <Button type="primary" @click="recordBtn">操作记录</Button>
    </div>

    <dt-grid ref="table" :onFetch="onFetch" />

    <!-- 操作记录 -->
    <data-record ref="operationRecord"></data-record>

    <Modal v-model="editModal" title="编辑" width="50%" :footer-hide="true">
      <div class="form_box">
        <Form ref="formValidate" :model="formValidate" :label-width="100" label-position="left">
          <FormItem label="抢客池：" :label-width="100" v-if="cusFlag">
            <div class="protect_date">
              <i-switch v-model="formValidate.cusSwi" @on-change="onSwiChange" />
              <div style="margin-left: 16px" v-show="formValidate.cusSwi">
                <span>每日最大抢客数</span>
                <InputNumber
                  v-model="formValidate.cusNum"
                  type="number"
                  :min="0"
                  :precision="0"
                  style="width: 48px" />
                <span>人</span>
              </div>
              <div><Input style="opacity: 0; width: 0"></Input></div>
            </div>
          </FormItem>
          <div v-else>
            <FormItem label="案场状态：">
              <span>{{ formValidate.caseStatus }}</span>
            </FormItem>
            <FormItem label="案场内客户到访跟进保护期：" :label-width="200" v-if="quFlag == 1">
              <div class="protect_date">
                <i-switch v-model="formValidate.protectDate" />
                <div style="margin-left: 16px" v-show="formValidate.protectDate">
                  <span>到访后，连续</span>
                  <InputNumber
                    v-model="formValidate.days"
                    type="number"
                    :min="1"
                    :precision="0"
                    style="width: 48px" />
                  <span>天不跟进，客户将进入案场公客池</span>
                </div>
                <div><Input style="opacity: 0; width: 0"></Input></div>
              </div>
            </FormItem>
            <FormItem label="案场客户流出保护期：" :label-width="200" v-else>
              <div class="protect_date">
                <i-switch v-model="formValidate.protectDate" />
                <div style="margin-left: 16px" v-show="formValidate.protectDate">
                  <span>案场公客池内客户停留</span>
                  <InputNumber
                    v-model="formValidate.days"
                    type="number"
                    :min="0"
                    :precision="0"
                    style="width: 48px" />
                  <span>天后，客户将进入公司客户池</span>
                </div>
                <div><Input style="opacity: 0; width: 0"></Input></div>
              </div>
            </FormItem>
          </div>
        </Form>
        <div class="btn_box">
          <Button type="primary" @click="ok">确定</Button>
          <Button style="margin-right: 24px" @click="cancel">取消</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
  import Column from './opt/columns.js'
  import protectOption from '@/biz/protectOption/protectOption'

  export default {
    name: 'DtManagementIndex',

    data() {
      return {
        currentId: null,
        editModal: false,
        switchVal: false,
        tableData: [
          { caseStatus: '案前' },
          { caseStatus: '案中' },
          { caseStatus: '尾盘' },
          { caseStatus: '停售' },
          { caseStatus: '撤场' },
          { caseStatus: '结案' }
        ],
        formValidate: {
          caseStatus: '案前',
          protectDate: false,
          days: 21,
          currentStatus: 1,
          cusSwi: false,
          cusNum: 5
        },
        cusFlag: false,
        quFlag: 1
      }
    },

    mounted() {
      this.$refs.table.init(this, new Column())
      this.$refs.table.fetch()
      this.getSwitchData()
    },

    methods: {
      onSwiChange(val) {
        console.log(val, this.cusFlag, 'vv')
        if (!val) {
          this.formValidate.cusNum = 5
        }
      },
      async onFetch() {
        let res = protectOption.getBuildProList()
        return Promise.resolve(res)
      },
      getSwitchData() {
        protectOption.getSwitch().then((res) => {
          console.log('开关状态', res)
          if (res === 1) {
            this.switchVal = true
          } else {
            this.switchVal = false
          }
        })
      },
      robButton() {
        protectOption.editSwitch({ buttonStatus: this.switchVal ? 1 : 0 }).then((res) => {
          console.log('抢客池开关', res)
        })
      },
      recordBtn() {
        this.$refs.operationRecord.show('buildRob')
      },
      edit(val) {
        console.log(val, '444')
        if (val.configContent == '抢客池') {
          this.cusFlag = true
          this.formValidate.cusSwi = Boolean(val.configStatus)
          this.formValidate.cusNum = val.configDays
        } else {
          this.cusFlag = false
        }
        this.editModal = true
        this.formValidate.currentStatus = val.buildingStatus
        this.formValidate.caseStatus = val.buildingStatusName
        this.formValidate.protectDate = val.configStatus === 1 ? true : false
        this.formValidate.days = val.configStatus === 1 ? val.configDays : null
        this.currentId = val.id
        this.quFlag = val.configType
      },
      ok() {
        console.log(this.cusFlag, '111')
        if (this.cusFlag) {
          let params = {
            buildingId: this.$dt.buildInfo().housesId,
            customerCount: this.formValidate.cusNum,
            snatchingPoolStatus: Number(this.formValidate.cusSwi)
          }
          protectOption.updateCompanyPoolButton(params).then((res) => {
            this.$Message.success('修改成功')
            this.$refs.table.fetch()
            this.editModal = false
          })
        } else {
          console.log(this.formValidate.protectDate, this.formValidate.days, '555')
          if (
            this.formValidate.protectDate &&
            (this.formValidate.days === '' || this.formValidate.days === null)
          ) {
            return this.$Message.error('请填写保护期天数')
          } else {
            this.editFun()
          }
        }

        console.log(this.formValidate)
      },
      // 编辑方法
      editFun() {
        let params = {
          buildingStatus: this.formValidate.currentStatus,
          configDays: this.formValidate.protectDate ? this.formValidate.days : null,
          configStatus: this.formValidate.protectDate ? 1 : 0,
          id: this.currentId
        }
        protectOption.editBuildProtect(params).then((res) => {
          this.$Message.success('修改成功')
          this.$refs.table.fetch()
          this.editModal = false
        })
      },
      cancel() {
        this.editModal = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .flexM {
    display: flex;
    align-items: center;
  }
  .rob_tab {
    padding: 24px;
    .rob_top {
      justify-content: space-between;
    }
  }
  .protect_date {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .btn_box {
    display: flex;
    flex-direction: row-reverse;
    padding-right: 24px;
  }
</style>
